export default [
  "string",
  "number",
  "json",
  "$getLoopColors",
  "$rotate",
  function ($string, $number, $json, $getLoopColors, $rotate) {
    return {
      attrs: {
        cx: $number(200),
        cy: $number(200),
        radius: $number(100),
        select: $string("-1"),
        data: $json([]),
      },
      region: {
        default(render, attr) {
          let painter1 = render("dog");
          painter1
            .beginPath()
            .moveTo(500, 500)
            .arc(500, 500, 100, 0, Math.PI)
            .fill();
          let painter2 = render("cat");
          painter2
            .beginPath()
            .moveTo(500, 500)
            .arc(500, 500, 100, 0, -Math.PI)
            .fill();

          let all = attr.data.reduce((n, item) => {
            return n + item.value;
          }, 0);
          //起始角度
          let startDeg = -0.5 * Math.PI;
          //跨越角度
          let allDeg = 0;
          for (let i = 0; i < attr.data.length; i++) {
            let deg = (attr.data[i].value / all) * 2 * Math.PI;
            //绘制图形
            render(i + "pre").fillArc(
              attr.cx,
              attr.cy,
              0,
              attr.radius,
              startDeg,
              deg
            );
            startDeg += deg;
          }
        },
      },
      link(painter, attr) {
        // console.log(attr.select);
        this.$reuseSeriesLink("circle", {
          attr: {
            cx: 300,
            cy: 300,
            radius: 20,
            'fill-color':'red'
          },
        });

        painter
          .beginPath()
          .moveTo(100, 400)
          .arc(100, 400, 100, 0, Math.PI)
          .fill();
        painter.config({ fillStyle: "black" }).fillCircle(500, 500, 100);
        if (attr.select == "dog") {
          painter
            .config({ fillStyle: "red" })
            .beginPath()
            .moveTo(500, 500)
            .arc(500, 500, attr.radius + 20, 0, Math.PI)
            .fill();
        } else if (attr.select == "cat") {
          painter
            .beginPath()
            .config({ fillStyle: "blue" })
            .moveTo(500, 500)
            .arc(500, 500, attr.radius + 20, 0, -Math.PI)
            .fill();
        }

        let colors = $getLoopColors(attr.data.length);

        let all = attr.data.reduce((n, item) => {
          return n + item.value;
        }, 0);
        //起始角度
        let startDeg = -0.5 * Math.PI;
        //跨越角度
        let allDeg = 0;
        //图形中间文字起始点
        let startTextPoint = {
          x: attr.cx,
          y: attr.cy - attr.radius * 0.5,
        };
        //起始点
        let startPoint1 = {
          x: attr.cx,
          y: attr.cy - attr.radius,
        };
        let startPoint2 = {
          x: attr.cx,
          y: attr.cy - attr.radius - 30,
        };
        for (let i = 0; i < attr.data.length; i++) {
          let deg = (attr.data[i].value / all) * 2 * Math.PI;
          let painterPoint1 = $rotate(
            attr.cx,
            attr.cy,
            deg * 0.5 + allDeg,
            startPoint1.x,
            startPoint1.y
          );
          let painterPoint2 = $rotate(
            attr.cx,
            attr.cy,
            deg * 0.5 + allDeg,
            startPoint2.x,
            startPoint2.y
          );
          let config = {
            fillStyle: colors[i],
            strokeStyle: colors[i],
          };
          //绘制图形
          painter
            .config(config)
            .fillArc(
              attr.cx,
              attr.cy,
              50,
              attr.select == i + "pre" ? attr.radius * 1.1 : attr.radius,
              startDeg,
              deg
            );
          //绘制图形中间的文字
          let textPoint = $rotate(
            attr.cx,
            attr.cy,
            deg * 0.5 + allDeg,
            startTextPoint.x,
            startTextPoint.y
          );

          painter
            .config({ fillStyle: "black", textAlign: "center" })
            .fillText(attr.data[i].key, textPoint[0], textPoint[1]);
          //绘制线条
          painter
            .config(config)
            .beginPath()
            .moveTo(painterPoint1[0], painterPoint1[1])
            .lineTo(painterPoint2[0], painterPoint2[1])
            .lineTo(
              painterPoint2[0] > attr.cx
                ? painterPoint2[0] + 20
                : painterPoint2[0] - 20,
              painterPoint2[1]
            )
            .stroke();
          //绘制文字
          painter
            .config({
              textAlign: painterPoint1[0] < attr.cx ? "right" : "left",
            })
            .fillText(
              attr.data[i].value,
              painterPoint2[0] > attr.cx
                ? painterPoint2[0] + 20
                : painterPoint2[0] - 20,
              painterPoint2[1]
            );
          startDeg += deg;
          allDeg += deg;
        }
      },
    };
  },
];
